<template>
  <a-card class="case_produce" :bordered="false">
    <a-spin tip="加载中..." :spinning="spinning">
      <div style="margin-bottom: 15px">
        <span class="add_form_label">{{ labelTitle }}</span>
        <span style="padding-left: 10px" v-if="currentSonstatus != null && currentSonstatus != undefined">
          <a-tag color="#52c41a" style="padding: 0px 5px">
            {{ Tp_proctypeEnum[currentSonstatus].sonStatus.name }}
          </a-tag>
        </span>
        <!-- 非中止情况展示这一个按钮 -->
        <!-- <a-button v-if="btnLabel" @click="activeBtnClick" type="primary" class="add_form_btn" v-show="operateBtnShow">
          {{ btnLabel }}
        </a-button> -->

        <!-- <span v-if="operateBtnShow && btnLabel" >
          <a-button v-if="processVal.includes(busiKey)" @click="activeBtnClick" type="primary" class="add_form_btn">
            {{ btnLabel }}
          </a-button>
          <a-button v-else @click="startBusinessProcedClick" type="primary" class="add_form_btn" :loading="processLoading">
            {{ btnLabel }}
          </a-button>
        </span> -->

        <a-button
          v-if="operateBtnShow && btnLabel"
          @click="startBusinessProcedClick"
          type="primary"
          class="add_form_btn btn_primary_color"
          :loading="processLoading"
        >
          {{ btnLabel }}
        </a-button>

        <!-- 当前是编辑模式 -->
        <a-button
          v-if="isEditModel && uploadBtnShow"
          class="add_form_btn btn_normal_color"
          @click="addCustomerMaterial"
        >
          新增自定义材料
        </a-button>
        <a-divider />
      </div>
      <div style="height: 50px" v-if="busiKey == delayKey && operateBtnShow">
        <a-col :span="4">
          <span class="tip_label"><span style="color: red; padding-right: 10px"> *</span><span>延期天数：</span></span>
        </a-col>
        <a-col :span="18">
          <a-input-number v-model="daySize" :min="1" :max="60" /> <span style="padding-left: 10px">天</span>
        </a-col>
      </div>

      <div style="height: 50px; margin-left: 10px" v-if="busiKey == mediateKey || busiKey == stopKey">
        <a-col :span="4"> <span class="tip_label">是否市领导审批：</span></a-col>
        <a-col :span="18">
          <a-radio-group
            name="radioGroup"
            v-model="isCitymanager"
            @change="citymanagerChange"
            :disabled="!operateBtnShow"
          >
            <a-radio :value="3200"> 是 </a-radio>
            <a-radio :value="3201"> 否 </a-radio>
          </a-radio-group>
        </a-col>
      </div>
      <a-list style="margin-left: 10px" class="file_list" item-layout="horizontal" :data-source="fileItem">
        <a-list-item slot="renderItem" slot-scope="item">
          <a-list-item-meta style="margin-top: 10px">
            <span slot="title">
              <div v-if="!item.isCustomer">
                <span v-if="item.required" style="color: red; padding-right: 5px; text-align: center">*</span>
                <span v-else style="padding-right: 10px"></span>
                <!-- <a-icon class="file_icon" slot="avatar" type="file-text" /> -->
                <div class="file_title">
                  <span class="upload_span">{{ item.fileName }}</span>
                  <a
                    style="color: #0072c6; margin-left: 10px"
                    class="upload_btn btn_normal_color"
                    v-show="uploadBtnShow"
                    @click="showUploadModal(item, false)"
                  >
                    <a-icon type="upload" />&nbsp;上传</a
                  >
                </div>
                <!-- <a-upload
                  :class="uploadBtnShow ? 'upload-style' : 'upload-style-hidden'"
                  :accept="acceptFileType"
                  :data="item"
                  :customRequest="uploadMaterial"
                  :beforeUpload="(file) => beforeUpload(file)"
                  :remove="handleRemove"
                  @preview="fileView"
                  :fileList="item.fileList"
                  :showUploadList="false"
                  name="file"
                  :multiple="true"
                >
                  <a-button v-show="uploadBtnShow"> <a-icon type="upload" />上传</a-button>
                </a-upload> -->
                <div class="upload_list_div" v-for="(fileItem, index) in item.fileList" :key="index">
                  <a class="upload_list_dropdown ant-dropdown-link" @click="e => e.preventDefault()">
                    <a-icon :style="{ color: '#0072c6' }" type="link" style="font-size: 14px" />
                    <a
                      type="link"
                      class="upload_list_item_name beyond_hiding"
                      :title="fileItem.filename"
                      :key="index"
                      @click="fileItem.isEditor ? null : handleClick(fileItem, index)"
                      @dblclick.prevent="handleDoubleClick(fileItem, index)"
                    >
                      <!-- 添加重命名输入框，根据fileItem.isEditor状态显示 -->
                      <input
                        :ref="`input${index}`"
                        v-show="fileItem.isEditor"
                        type="text"
                        class="transparent-input"
                        v-model="newFilename"
                        :key="index"
                        ref="inputRef"
                        autofocus
                        @blur="saveFileName(fileItem)"
                        @keydown.enter="saveFileName(fileItem)"
                      />

                      <span style="color: #0072c6" v-show="!fileItem.isEditor">{{ fileItem.filename }}</span>
                    </a>
                    <a-dropdown :trigger="['click']">
                      <a
                        class="ant-dropdown-link"
                        style="display: inline-block; width: 70px; color: #000"
                        @click="e => e.preventDefault()"
                        >操作<a-icon type="down" style="padding-left: 10px"
                      /></a>
                      <a-menu slot="overlay">
                        <a-menu-item>
                          <a style="display: block" @click="downloadFile(fileItem)">下载</a>
                        </a-menu-item>
                        <!-- <a-menu-item>
                          <a style="display: block;" @click="fileView(fileItem)">预览</a>
                        </a-menu-item> -->
                        <a-menu-item>
                          <a style="display: block" @click="handleRemove(fileItem)">删除</a>
                        </a-menu-item>
                        <!-- <a-menu-item>
                          <a style="display: block;" @click="editFile(fileItem)">编辑</a>
                        </a-menu-item> -->
                        <a-menu-item>
                          <a style="display: block" @click="weboffice(currentUser.userId, applyid, fileItem)"
                            >在线编辑</a
                          >
                        </a-menu-item>
                        <a-menu-item>
                          <a style="display: block" @click="versionView(fileItem)">历史版本</a>
                        </a-menu-item>
                      </a-menu>
                    </a-dropdown>
                  </a>
                </div>
              </div>
              <div v-else-if="item.isSaved && !item.isUpdated">
                <span style="padding-right: 10px"></span>
                <!-- <a-icon class="file_icon" slot="avatar" type="file-text" /> -->
                <div class="file_title">
                  <span class="upload_span">
                    {{ item.fileName }}
                    <!-- <a style="margin-left:40px" type="link" @click="editCustomerMaterial(item)">编辑</a> -->
                    <a
                      style="color: #0072c6; margin-left: 10px"
                      class="upload_btn btn_normal_color"
                      v-show="uploadBtnShow && item.isSaved"
                      @click="showUploadModal(item, true)"
                    >
                      <a-icon :style="{ color: '#0072c6' }" type="upload" />&nbsp;上传</a
                    >
                    <a-divider type="vertical" />
                    <span style="color: #0072c6" @click="editCustomerMaterial(item)">
                      <a-icon
                        :style="{ color: '#0072c6' }"
                        v-show="uploadBtnShow"
                        class="customer_icon"
                        @click="editCustomerMaterial(item)"
                        type="edit"
                      />&nbsp;编辑</span
                    >

                    <a-popconfirm
                      title="确认删除自定义材料项吗？"
                      ok-text="是"
                      cancel-text="否"
                      @confirm="deleteCustomer(item)"
                      class="left_icon"
                    >
                      <a-divider type="vertical" />
                      <span style="color: #0072c6"
                        ><a-icon
                          :style="{ color: '#0072c6' }"
                          v-show="uploadBtnShow"
                          class="customer_icon"
                          type="delete"
                        />&nbsp;删除</span
                      >
                    </a-popconfirm>
                  </span>
                </div>
                <!-- <a-upload
                  :class="uploadBtnShow ? 'upload-style' : 'upload-style-hidden'"
                  :accept="acceptFileType"
                  :data="item"
                  :customRequest="uploadMaterialCustomer"
                  :beforeUpload="(file) => beforeUpload(file)"
                  :remove="handleRemove"
                  @preview="fileView"
                  :fileList="item.fileList"
                  :showUploadList="false"
                  name="file"
                  :multiple="true"
                >
                  <a-button v-show="uploadBtnShow && item.isSaved"> <a-icon type="upload" />上传</a-button>
                </a-upload> -->
                <div class="upload_list_div" v-for="(fileItem, index) in item.fileList" :key="index">
                  <a class="upload_list_dropdown ant-dropdown-link" @click="e => e.preventDefault()">
                    <a-icon :style="{ color: '#0072c6' }" type="link" style="font-size: 14px" />
                    <a
                      type="link"
                      class="upload_list_item_name beyond_hiding"
                      :title="fileItem.filename"
                      :key="index"
                      @click="fileItem.isEditor ? null : handleClick(fileItem, index)"
                      @dblclick.prevent="handleDoubleClick(fileItem, index)"
                    >
                      <!-- 添加重命名输入框，根据fileItem.isEditor状态显示 -->
                      <input
                        :ref="`input${index}`"
                        v-show="fileItem.isEditor"
                        type="text"
                        class="transparent-input"
                        v-model="newFilename"
                        :key="index"
                        ref="inputRef"
                        autofocus
                        @blur="saveFileName(fileItem)"
                        @keydown.enter="saveFileName(fileItem)"
                      />

                      <span style="color: #0072c6;" v-show="!fileItem.isEditor">{{ fileItem.filename }}</span>
                    </a>
                    <a-dropdown :trigger="['click']">
                      <a
                        class="ant-dropdown-link"
                        style="display: inline-block; width: 70px; color: #000"
                        @click="e => e.preventDefault()"
                        >操作<a-icon type="down" style="padding-left: 10px"
                      /></a>
                      <a-menu slot="overlay">
                        <a-menu-item>
                          <a style="display: block" @click="downloadFile(fileItem)">下载</a>
                        </a-menu-item>
                        <!-- <a-menu-item>
                          <a style="display: block;" @click="fileView(fileItem)">预览</a>
                        </a-menu-item> -->
                        <a-menu-item>
                          <a style="display: block" @click="handleRemove(fileItem)">删除</a>
                        </a-menu-item>
                        <a-menu-item>
                          <a style="display: block" @click="weboffice(currentUser.userId, applyid, fileItem)"
                            >在线编辑</a
                          >
                        </a-menu-item>
                        <a-menu-item>
                          <a style="display: block" @click="versionView(fileItem)">历史版本</a>
                        </a-menu-item>
                      </a-menu>
                    </a-dropdown>
                  </a>
                </div>
              </div>
              <div class="customer_div" v-else-if="!item.isSaved || item.isUpdated">
                <span class="customer_span"> {{ !item.isSaved ? '新增:' : '修改:' }}</span>
                <a-input
                  class="customer_input"
                  ref="userNameInput"
                  v-model="item.fileName"
                  placeholder="请输入自定义材料名称"
                  :max-length="50"
                >
                  <!-- <a-icon slot="prefix" type="file-add" /> -->
                  <a-tooltip slot="suffix" title="材料名称长度上限50">
                    <a-icon type="info-circle" style="color: rgba(0, 0, 0, 0.45)" />
                  </a-tooltip>
                </a-input>
                <div class="customer_icon_group" v-show="uploadBtnShow">
                  <a-popconfirm
                    title="确认撤销吗？"
                    ok-text="是"
                    cancel-text="否"
                    @confirm="rollBackCustomerMaterial(item)"
                    class="left_icon"
                  >
                    <a-icon class="customer_icon" type="close" />
                  </a-popconfirm>
                  <a-popconfirm
                    title="确认保存吗？"
                    ok-text="是"
                    cancel-text="否"
                    @confirm="saveCustomerMaterial(item)"
                    class="left_icon"
                  >
                    <a-icon class="customer_icon" style="margin-left: 20px" type="check" />
                  </a-popconfirm>
                </div>
              </div>
            </span>
          </a-list-item-meta>
        </a-list-item>
      </a-list>
    </a-spin>
    <!--
    <component
      ref="component"
      :is="component"
      :applyid="applyid"
      :proctype="busiName"
      :busiType="busiType"
      :fileItem="fileItem"
      :processinstanceid="processinstanceid"
      @reload="reloadComponent"
      @gotoSonRouter="autoToSonRouter"
    />

    <component
      ref="updateComponent"
      :is="updateComponent"
      :applyid="applyid"
      :busiType="busiType"
      :materialOption="selectedOption"
      @reload="reloadComponent"
    /> -->

    <MultiUploadProduce
      ref="multiUploadProduce"
      :applyid="applyid"
      :busiType="busiType"
      :currentUser="currentUser"
      @afterUpload="queryMaterialsList"
    ></MultiUploadProduce>
    <MaterialVersion ref="materialVersionRef"></MaterialVersion>
  </a-card>
</template>
<script>
import { getTabByCategory } from '@/enumeration/Tp_category'
import { ProcedureMinxin } from '../ProcedureMinxin'
import { Tp_proctypeEnum } from '@/enumeration/Tp_proctype'
import { startBusinessProced } from '@/api/accept/business_Approve'
import { findAllAuditList } from '@/api/accept/apl_admre_audit'
const processVal = [
  Tp_proctypeEnum.hear_hearing.value, // 听证
  Tp_proctypeEnum.hear_stop.value, // 停止执行
  Tp_proctypeEnum.hear_delay.value, // 延期
  Tp_proctypeEnum.hear_rest.value, // 中止
  Tp_proctypeEnum.hear_restore.value // 中止-恢复
]
const delayKey = Tp_proctypeEnum.hear_delay.value
// const hearingKey = Tp_proctypeEnum.hear_hearing.value // 听证
const mediateKey = Tp_proctypeEnum.hear_mediate.value // 受理后调整
const stopKey = Tp_proctypeEnum.hear_stop.value // 停止执行

export default {
  mixins: [ProcedureMinxin],
  data () {
    return {
      processVal: processVal,
      delayKey: delayKey, // 延期key
      // hearingKey: hearingKey, // 听证key
      mediateKey: mediateKey, // 受理后调整key
      stopKey: stopKey, // 停止执行key
      daySize: 30 // 延期天数，用于延期字段
    }
  },
  async created () {
    console.log('busikey' + this.busiKey)
    this.initParam()
    if (this.sonStatus != undefined && this.sonStatus != null) {
      this.currentSonstatus = this.sonStatus.filter(item => item == this.busiName)[0]
    } else {
      this.currentSonstatus = undefined
    }
  },
  mounted () {},
  methods: {
    // initComponent() {
    //   // this.component = () => import(`@/views/handleCase/accept/${this.tabActive}`)
    //   let tabActive = 'CaseHandleBasic'
    //   if (this.busiName === this.Tp_proctypeEnum.hear_hearing.key) {
    //     // 听证
    //     // tabActive = 'CaseHandleHear'
    //     this.component = () => import('@/views/handleCase/base/component/BaseCaseHandle')
    //     this.updateComponent = () => import('@/views/handleCase/base/component/BaseCaseHandleUpdate')
    //     return
    //   } else if (this.busiName === this.Tp_proctypeEnum.hear_stop.key) {
    //     // 停止执行
    //     // tabActive = 'CaseHandleStop'
    //     this.component = () => import('@/views/handleCase/base/component/BaseCaseHandle')
    //     this.updateComponent = () => import('@/views/handleCase/base/component/BaseCaseHandleUpdate')
    //     return
    //   } else if (this.busiName === this.Tp_proctypeEnum.hear_delay.key) {
    //     // 延期
    //     // tabActive = 'CaseHandleDelay'
    //     this.component = () => import('@/views/handleCase/base/component/BaseCaseHandle')
    //     this.updateComponent = () => import('@/views/handleCase/base/component/BaseCaseHandleUpdate')
    //     return
    //   } else if (this.busiName === this.Tp_proctypeEnum.hear_rest.key) {
    //     // 中止
    //     // tabActive = 'CaseHandleRest'
    //     this.component = () => import('@/views/handleCase/base/component/BaseCaseHandle')
    //     this.updateComponent = () => import('@/views/handleCase/base/component/BaseCaseHandleUpdate')
    //     return
    //   } else if (this.busiName === this.Tp_proctypeEnum.hear_restore.key) {
    //     // 中止-恢复
    //     // tabActive = 'CaseHandleRestore'
    //     this.component = () => import('@/views/handleCase/base/component/BaseCaseHandle')
    //     this.updateComponent = () => import('@/views/handleCase/base/component/BaseCaseHandleUpdate')
    //     return
    //   } else {
    //     tabActive = 'CaseHandleBasic'
    //   }
    //   this.component = () => import(`@/views/handleCase/accept/${tabActive}`)
    //   this.updateComponent = () => import('@/views/handleCase/base/component/BaseCaseHandleUpdate')
    // },
    async setButtonDisabled () {
      if (this.isEditModel) {
        // 是否是从编辑模式进入
        if (this.typeEnum.key == this.Tp_proctypeEnum.mater_mediate.key) {
          // 受理材料补充
          this.operateBtnShow = false // 操作按钮展示
          return
        }
        const tabCategory = getTabByCategory(this.category, this.busiKey)
        if (tabCategory == 'editAll') {
          this.operateBtnShow = true // 操作按钮展示
          this.uploadBtnShow = true // 上传按钮展示
        } else if (tabCategory == 'disabled') {
          this.operateBtnShow = false
          this.uploadBtnShow = true
        } else if (tabCategory == 'editOnlySelf') {
          this.operateBtnShow = false
          this.uploadBtnShow = true
        }
        // 判断是否是在启用的子流程，若是则需要隐藏提交按钮
        if (this.sonStatus.includes(this.busiName)) {
          this.operateBtnShow = false
        }
      } else {
        this.operateBtnShow = false
        this.uploadBtnShow = false
      }
      // FIXME: 临时放开
      this.uploadBtnShow = true
      // 判断当前是否是程序转换流程，若是并且之前已有对应流程，则无法再次转换
      if (this.typeEnum.key == this.Tp_proctypeEnum.hear_transform.key) {
        // 查询当前的流程的数据
        const res = await findAllAuditList(this.applyid)
        if (res.code == 0 && res.data && res.data.length > 0) {
          const transAudits = res.data.filter(el => el.type == this.Tp_proctypeEnum.hear_transform.value)
          if (transAudits && transAudits.length > 0) {
            this.operateBtnShow = false
          }
        }
      }
    },
    startBusinessProced (busiName, typeEnum) {
      // 启动流程
      const flowParams = {
        applyid: this.applyid, // applyid
        proctype: busiName, // 操作分类
        userid: this.currentUser.userId,
        username: this.currentUser.fullname,
        processinstanceid: this.processinstanceid, // 流程实例id
        cause: '', // 案由
        describe: typeEnum.name + '申请'
      }
      const docfield = {
        isCitymanager: this.isCitymanager
      }
      if (this.busiKey == this.delayKey) {
        docfield['daySize'] = this.daySize
      }
      this.processLoading = true
      console.log('流程入参', flowParams)
      startBusinessProced(flowParams, docfield).then(res => {
        this.processLoading = false
        if (res.code !== 0) {
          this.$message.error('操作失败')
        } else {
          this.$message.success('操作成功')
          this.$emit('reload')
          this.$emit('close')
          this.modalVisible = false
          // 暂时隐藏流程跳转
          this.autoToSonRouter(res.data, busiName)
        }
        this.loading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~@/assets/css/apply/caseProcedure.scss';
.transparent-input {
  background-color: transparent; /* 设置背景透明 */
  border: none; /* 移除边框 */
  border-bottom: 1px solid rgb(251, 251, 252); /* 可选：添加底部边框以提升可视度 */
  outline: none; /* 移除默认的输入框外观 */
  color: rgb(119, 166, 253); /* 设置文本颜色 */
  /* 可以根据需要添加更多样式 */
}
</style>
